<template>
  <div>
    <input placeholder="输入关键字搜索" v-model="search" >
    <!-- 使用组件 -->
    <MyProduct :list="renderList" @details="details"></MyProduct>
  </div>
</template>
<script>
// 引入组件
import MyProduct from './components/MyProduct.vue'
export default {
  // 注册组件
  components:{
    MyProduct
  },
  data(){
    return {
      list:[
      {id:1,date:'2020-02-01',uname:'章三',res:'感冒',mes:'健康',details:'详情'},
      {id:2,date:'2020-02-01',uname:'李四',res:'头疼',mes:'健康',details:'详情'},
      {id:3,date:'2020-02-01',uname:'王五',res:'腰痛',mes:'健康',details:'详情'}
      ],
    search:''
    }
  },
  computed:{
    renderList(){
      return this.list.filter((item)=>{
        return item.date.includes(this.search) ||
        item.uname.includes(this.search) ||
        item.res.includes(this.search) ||
        item.mes.includes(this.search)
       })
    }
  },
  methods:{
    details(item){
    alert(`
    就诊记录详情
    就诊日期：${item.date}
    医生姓名：${item.uname}
    诊断结果：${item.res}
    处方信息：${item.mes}
    `
    )
  }
  }
}
</script>

<style scoped>
  
</style>
